<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-19 11:32:09
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-22 12:06:11
 * @Description: overview
-->
<!--  -->
<template>
  <div class="main-window">
    <!-- ------------- 搜索栏 ----------------- -->
    <div class="search none-select">
      <a class="searchbar">
        <input id="search" placeholder="Search..." class="search-input" type="text" />
        <label for="search" class="search-icon">
          <img height="24" src="../assets/imgs/search.svg" alt="" />
        </label>
      </a>
      <!-- 通知 -->
      <a class="noticebar">
        <RemindIcon class="icon" theme="outline" size="24" :strokeWidth="3" />
      </a>
    </div>

    <!-- -------------------------------- 中间部分 ------------------------ -->
    <div class="middle-box">
      <!-- ------------ Welcoome ------------ -->
      <div class="welcome none-select">
        <div class="subtitle">Hi Li Zengkun,</div>
        <div class="title">Welcome back👋</div>
      </div>
      <!-- <div class="clear"></div> -->

      <!-- ----------- Banner --------------- -->
      <div class="banner slide-in-left">
        <div class="behind-card"></div>
        <div class="behind-card"></div>
        <div class="front-card">
          <ul class="banner-list">
            <li>
              <div class="fr">
                <img class="ball" src="../assets/imgs/ball-1.svg" alt="" />
              </div>
              <div class="text fl">
                <div class="headline">Set a Google Analytics Code</div>
                <div class="content">
                  Did you know you can set a Google Analytics code for your products?
                </div>
                <div class="btn card-shadow">Go Setting</div>
              </div>
              <div class="clear"></div>
            </li>
          </ul>
        </div>
      </div>

      <!-- ----------- content-card -------------  -->
      <div id="overview-card1" class="card fl none-select slide-in-left">
        <div class="shadow"></div>
        <div class="bg">
          <div class="card-headline">Earing by items</div>
          <ul class="overview-card1-list">
            <li>
              <span class="icon fl">
                <img src="../assets/imgs/ball-1.svg" alt="" />
              </span>
              <span class="text fl">
                <div class="title">Bento 3D Kit</div>
                <div class="subtitle">lllustration</div>
              </span>
              <span class="more fr">
                <RightIcon theme="outline" size="24" :strokeWidth="3" />
              </span>

              <div class="clear"></div>
            </li>

            <li>
              <span class="icon fl">
                <img src="../assets/imgs/ball-2.svg" alt="" />
              </span>
              <span class="text fl">
                <div class="title">Bento 3D Kit</div>
                <div class="subtitle">lllustration</div>
              </span>
              <span class="more fr">
                <RightIcon theme="outline" size="24" :strokeWidth="3" />
              </span>

              <div class="clear"></div>
            </li>

            <li>
              <span class="icon fl">
                <img src="../assets/imgs/ball-3.svg" alt="" />
              </span>
              <span class="text fl">
                <div class="title">Bento 3D Kit</div>
                <div class="subtitle">lllustration</div>
              </span>
              <span class="more fr">
                <RightIcon theme="outline" size="24" :strokeWidth="3" />
              </span>

              <div class="clear"></div>
            </li>
          </ul>
        </div>
      </div>

      <div id="overview-card2" class="card fr none-select slide-in-left">
        <div class="shadow"></div>
        <div class="bg">
          <div class="card-headline">Earing</div>
          <div class="content">
            <div class="chart">这里是图表</div>
            <div class="btn card-shadow">Go Analytics</div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <!-- -------------------------------- 右边部分 ------------------------ -->
    <div class="right-box">
      <!-- card3 -->
      <div class="overview-card3 card slide-in-right">
        <div class="shadow"></div>
        <div class="bg">
          <div class="card-headline">Your earning this month</div>
          <div class="num">479.4</div>
          <div class="content">Update your payout method in Settings</div>
          <div class="btn card-shadow none-select pointer">Withdraw All Earning</div>
        </div>
      </div>
      <!-- card4 -->
      <div class="overview-card4 card slide-in-right">
        <div class="shadow"></div>
        <div class="bg"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
};
</script>

<style scoped>
.search {
  position: absolute;
  height: 96px;
  line-height: 96px;
  right: 0;
  width: calc(var(--right-box-width) - 1px);
  /* background: var(--background-color); */
  /* background: var(--second-color); */
}
.searchbar {
  position: absolute;
  top: 0;
  left: 40px;
  bottom: 0;
  margin: auto 0;
  transition: all 0.2s ease-out;
}
.search-icon {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto 0;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.search-icon img {
  position: absolute;
  display: inline-block;
  margin-top: 0px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.search-input {
  width: var(--search-input-width);
  position: absolute;
  border: none;
  height: 48px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  color: var(--text-active-color);
  box-shadow: 0 10px 10px -4px rgba(0, 0, 0, 0.3);
  font-size: 20px;
  padding-left: 48px;
  box-sizing: border-box;
  border-radius: 24px;
  transition: all 0.3s ease-out;
}
.searchbar:hover {
  left: 16px;
}
.searchbar:active {
  box-shadow: none;
  transform: translateY(2px);
}
.searchbar:hover .search-input {
  background: var(--second-color);
  color: #fff;
  width: 300px;
  box-shadow: 0 10px 10px -4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-out;
}
.searchbar:active .search-input {
  background: var(--primary-color);
  box-shadow: none;
}
.search-input:hover label.search-icon {
  left: 20px;
}
.noticebar {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 20px;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  box-shadow: 0 10px 10px -4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-out;
  cursor: pointer;
}
.noticebar .icon {
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.noticebar:hover {
  color: #fff;
  background: var(--second-color);
}
.noticebar:active {
  background: var(--primary-color);
  box-shadow: none;
  transform: translateY(2px);
}

/* ------------------------- Middle ------------------------ */

/* card */

.card-headline {
  font-weight: 500;
  font-size: 18px;
  padding-top: 32px;
  padding-left: 32px;
  line-height: 24px;
  color: var(--text-active-color);
  z-index: 2;
}
.overview-card1-list {
  margin-top: 32px;
  padding: 0 16px;
  height: calc(100% - 82px - 32px);
}
.overview-card1-list > li {
  position: relative;
  width: 100%;
  height: 88px;
  margin-bottom: 16px;
  border-radius: 22px;
  transition: all 0.3s ease-out;
  cursor: pointer;
  overflow: hidden;
}
.overview-card1-list > li:hover {
  transition: all 0.3s ease-out;
  background: var(--other-color-1);
}
.overview-card1-list > li:hover .text .title,
.overview-card1-list > li:hover .text .subtitle {
  transition: all 0.3s ease-out;
  color: #fff;
}
.overview-card1-list > li:hover .icon img {
  transform: scale(2.5);
}
.overview-card1-list > li .icon {
  position: relative;
  display: inline-block;
  height: 56px;
  border-radius: 16px;

  width: 56px;
  margin-top: 16px;
  margin-left: 16px;
  background: var(--other-color-1);
}
.overview-card1-list > li .icon img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  transition: all 0.3s ease-out;
}
.overview-card1-list > li .text {
  margin-left: 20%;
  margin-top: 24px;
}
.overview-card1-list > li .text .title {
  color: var(--text-active-color);
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  transition: all 0.3s ease-out;
}
.overview-card1-list > li .text .subtitle {
  font-weight: 600;

  font-size: 13px;
  line-height: 18px;
  color: var(--font-grey-color);
  transition: all 0.3s ease-out;
}
.overview-card1-list > li .more {
  height: 100%;
  color: var(--text-active-color);
  transition: all 0.3s ease-out;
  padding-top: 32px;
  margin-right: 16px;
}
.overview-card1-list > li:hover .more {
  color: #fff;
  transition: all 0.3s ease-out;
}

.overview-card1-list > li:nth-child(1) .icon img {
  height: 40px;
}
.overview-card1-list > li:nth-child(2) .icon {
  background: var(--other-color-2);
}
.overview-card1-list > li:nth-child(2):hover {
  background: var(--other-color-2);
}
.overview-card1-list > li:nth-child(3) .icon {
  background: var(--other-color-3);
}
.overview-card1-list > li:nth-child(3):hover {
  background: var(--other-color-3);
}
/* card2 */
#overview-card2,
#overview-card1 {
  margin-top: 40px;
}
#overview-card2 .bg {
  background: #ffebf6;
}
#overview-card2 .content {
  position: relative;
  background: var(--background-color);
  height: 302px;
  width: calc(100% - 16px);
  margin-left: 8px;
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
}
#overview-card2 .content .chart {
  width: 100%;
  height: 203px;
  background: var(--second-color);
  text-align: center;
}
#overview-card2 .content .btn {
  position: absolute;
  width: calc(100% - 48px);
  left: 0;
  right: 0;
  border-radius: 16px;
  margin: 0 auto;
  height: 56px;
  background: var(--primary-color2);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 56px;
  bottom: 24px;
}

/* card3 */
.overview-card3,
.overview-card4 {
  width: 100%;
  margin-top: 0;
}
.overview-card3 .bg {
  height: auto;
  text-align: center;
  border-radius: 24px;
  padding: 0 32px 32px 32px;
}
.overview-card3 .card-headline {
  padding-left: 0;
}
.overview-card3 .num {
  font-weight: 600;
  font-size: 72px;
  line-height: 88px;
  margin-top: 12px;
  color: var(--primary-color2);
}
.overview-card3 .content {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-top: 12px;
  color: var(--font-grey-color);
}
.overview-card3 .btn {
  height: 56px;
  width: 100%;
  color: var(--blue-color);
  font-weight: 700;
  border-radius: 16px;
  margin-top: 32px;
  font-size: 14px;
  line-height: 56px;
  background: var(--background-color);
}
/* card4 */

/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1224px) {
  .overview-card3,
  .overview-card4 {
    width: calc(50% - 16px);
  }
}
/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .overview-card3,
  .overview-card4 {
    width: 100%;
  }
}
</style>
